<template>
  <div class="user-profile-container">
    <h2>个人信息</h2>
    <el-divider />
    <div class="profile-info">
      <el-avatar :size="120" :src="userAvatar" class="user-avatar" />
      <div class="user-details">
        <span class="user-name">{{ userName }}</span>
        <p class="user-email">{{ userEmail }}</p>
      </div>
    </div>
    <div class="info-cards-container">
      <el-card class="info-card">
        <template #header>
          <span>基本信息</span>
        </template>
        <div class="info-item">
          <span>姓名：</span>
          <span>{{ userInfo.name }}</span>
        </div>
        <div class="info-item">
          <span>地址：</span>
          <span>{{ userInfo.address }}</span>
        </div>
        <div class="info-item">
          <span>电话：</span>
          <span>{{ userInfo.phone }}</span>
        </div>
      </el-card>
      <el-card class="info-card">
        <template #header>
          <span>其他信息</span>
        </template>
        <div class="info-item">
          <span>饮食喜好：</span>
          <span>{{ userInfo.dietPreference }}</span>
        </div>
        <div class="info-item">
          <span>会员等级：</span>
          <span>{{ userInfo.membershipLevel }}</span>
        </div>
        <div class="info-item">
          <span>红包：</span>
          <span>{{ userInfo.redEnvelopes }}</span>
        </div>
      </el-card>
    </div>
    <el-button @click="goBack">返回</el-button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 固定的个人信息
const userInfo = {
  name: '刘卓姚',
  address: '上海市浦东新区XX路XX号',
  phone: '13800138000',
  dietPreference: '喜欢西餐和甜品',
  membershipLevel: '高级会员',
  redEnvelopes: '50元'
}

const userName = userInfo.name
const userEmail = 'liuzhuoyao@example.com'
const userAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'

const goBack = () => {
  router.back()
}
</script>

<style scoped>
.user-profile-container {
  padding: 20px;
  text-align: center;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  max-width: 600px;
}

h2 {
  margin-bottom: 20px;
  color: #333;
  font-size: 24px;
}

.profile-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.user-avatar {
  margin-right: 20px;
  border: 3px solid #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease;
}

.user-avatar:hover {
  transform: scale(1.1);
}

.user-details {
  text-align: left;
}

.user-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.user-email {
  color: #666;
}

.info-cards-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.info-card {
  margin: 10px;
  text-align: left;
  flex: 1;
  min-width: 250px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.info-item {
  margin-bottom: 10px;
  padding: 0 10px;
}

.el-button {
  background-color: #409eff;
  border-color: #409eff;
  color: white;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.el-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
</style>